<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;/*去掉列表中的默认样式*/
            font-weight:normal;
        }

        a{
            text-decoration: none;
        }

        img{
            border:none;
        }

        body{
            font-family: "微软雅黑","宋体",sans-serif;
        }
        .leftNavMenu{
            position: fixed;
            left: 10px;
            top: 40%;
            display: none;
        }
        .leftNavMenu li{
            width: 200px;
            height: 40px;
            background: yellowgreen;
            text-align: center;
            border-bottom: 1px solid #007AFF;
        }
        .leftNavMenu li:last-child{
            border-bottom: 0;
        }
        .leftNavMenu li:nth-child(2){
            background: blueviolet;
        }
        .leftNavMenu li:nth-child(3){
            background: lightblue;
        }
        .leftNavMenu li:nth-child(4){
            background: #00BBBB;
        }
        .leftNavMenu li:nth-child(5){
            background: #FFC0CB;
        }
        .leftNavMenu li a{
            display: block;
            line-height: 40px;
            width: 100%;
            height: 100%;
            color: #ffffff;
        }
        .leftNavMenu li .h_color{ /* 当前活动菜单 */
            background: #ffffff;
            color: #FF0000;
        }


        section{
            height: 1000px;
            width: 100%;
        }
        #test_1{
            background-color: blue;
        }
        #test_2{
            background-color: grey;
        }
        #test_3{
            background-color: gold;
        }
        #test_4{
            background-color: dodgerblue;
        }
        #test_5{
            background-color: #d0bcad;
        }

    </style>
</head>
<body>
<ul class="leftNavMenu">
    <li><a class="h_sco" href="#test_1">前端</a></li>
    <li><a class="h_sco" href="#test_2">后端</a></li>
    <li><a class="h_sco" href="#test_3">数据库</a></li>
    <li><a class="h_sco" href="#test_4">编译器</a></li>
    <li><a class="h_sco" href="#test_5">人工智能</a></li>
</ul>
<div style="height: 500px;"></div>
<div style="height: 1000px;" id="test_1" class="contentFloor sds"></div>
<div style="height: 2000px;" id="test_2" class="contentFloor"></div>
<div style="height: 3000px;" id="test_3" class="contentFloor ss"></div>
<div style="height: 1000px;" id="test_4" class="contentFloor"></div>
<div style="height: 3000px;" id="test_5" class="contentFloor"></div>
<div style="height: 3000px;"></div>
<script src="../../static/common/libs/jquery/jquery-3.7.1.min.js"></script>
<script>
    /* 锚点导航-开始 */
    !function(o){
        "use strict";
        o.anchorScroll=function(l,t){
            var n=this;
            n.$el=o(l),
                n.el=l,
                n.init=function(){
                n.options=o.extend({},o.anchorScroll.defaultOptions,t)
                },
                n.$el.click(
                    function(t){
                        if(t.preventDefault(),o(t.target).closest("a").length&&o(n.el.hash).length){
                            var e=o(n.el.hash).offset().top-n.options.offsetTop,
                                s="this"===n.$el.data("classTo")?n.el:n.$el.data("classTo"),c=n.$el.data("onScroll"),
                                a=n.$el.data("scrollEnd");
                            "function"==typeof n.options.scrollStart&&n.options.scrollStart.call(l),o(s).addClass(c).removeClass(a),
                                o("html,body").animate({scrollTop:e+1},n.options.scrollSpeed).promise().done(function(){
                                    o(s).addClass(a).removeClass(c),
                                    "function"==typeof n.options.scrollEnd&&n.options.scrollEnd.call(l)
                                }
                                )
                        }
                    }),
                n.init()},o.anchorScroll.defaultOptions={scrollSpeed:800,offsetTop:0},o.fn.anchorScroll=function(l){return this.each(function(){new o.anchorScroll(this,l)})}}(jQuery,window,document);

    $(function(){
        $('.h_sco').anchorScroll({
            scrollSpeed: 500
        });
        $(document).scroll(function(e){
            for (var i=0;i < $(".contentFloor").length;i++) {
                if($(document).scrollTop()<=200){
                    $(".leftNavMenu").css('display','none');
                }else if($(document).scrollTop()>200&&($(document).scrollTop()-$(".contentFloor").eq(i).offset().top)>0&&($(document).scrollTop()-$(".contentFloor").eq(i).offset().top)<200){
                    $(".leftNavMenu").css('display','block');
                    $(".leftNavMenu>li>a").removeClass('h_color');
                    $(".leftNavMenu>li>a").eq(i).addClass('h_color');
                }
            }
        })
    })
    /* 锚点导航-结束 */
</script>
</body>
</html>